<template>
  <div class="ruleIndex"  @touchmove.stop.prevent="()=>{}">
    <div class="activityRules">
      <span v-show="closeBtnType == 'iconfont'" class="iconfont iconguanbi" @click="handleClose"></span>
      <div v-show="isShowIcon" class="logo"></div>
      <div v-show="isShowIcon" class="logoDiv"></div>
      <h2>{{title}}</h2>
      <p class="ruleContent" v-if="isShowRule && !isCustomContent" v-html="content"></p>
      <p class="ruleContent" v-else v-html="customContent"></p>
      <div v-show="closeBtnType == 'btn'" :class="['closeBtn']" @click="handleClose">我知道了</div>
    </div>
  </div>
</template>
<script>
// import {BodyScroll} from '@/tools/utils'
export default {
  data() {
    return {
      isCustomContent: false
    };
  },
  props: {
    title: {
      type: String,
      default: '活动规则'
    },
    content: {
      type: String,
    },
    isShowRule: {
      type: Boolean,
      default: false
    },
    isShowIcon: {
      type: Boolean,
      default: false
    },
    closeBtnType: {
      type: String,
      default: 'btn'
    },
    customContent: {
      type: String
    }
  },
  watch: {
    isShowRule (val) {
      this.$store.commit("controlMask", { maskIsShow: val });
      // BodyScroll(val)
    },
    customContent (val) {
      this.isCustomContent = val
    }
  },
  methods: {
    handleClose() {
      this.$emit("closeRule");
      if (this.isCustomContent) {
        this.$parent.coinAnimate()
        setTimeout(() => {
          this.$parent.getRunIndex()
        }, 3000);
      }
    }
  }
};
</script>
<style lang="less" scoped>

.activityRules {
  width: 5.46rem;
  padding: 0.37rem;
  border-radius: 0.2rem;
  background: #fff;
  color: #383838;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  .logo{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.53rem;
    height: 1.53rem;
    background: url(../../assets/images/tipIcon.png) no-repeat;
    background-size: contain;
    background-position: center;
  }
  .logoDiv{
    height: 0.5rem;
    width: 100%;
  }
  .iconfont{
    position: absolute;
    top: 0.36rem;
    right: 0.27rem;
    font-size: 0.24rem;
  }
  h2 {
    font-size: 0.36rem;
    text-align: center;
  }

  p {
    font-size: 0.26rem;
    line-height: 0.4rem;
    margin-top: 0.3rem;
  }
  .closeBtn {
    width: 5rem;
    height: 0.74rem;
    border-radius: 0.37rem;
    background: #33B2CE;
    font-size: 0.3rem;
    text-align: center;
    line-height: 0.74rem;
    color: #fff;
    margin: 0.5rem auto 0;
  }
  .ruleContent{
    // max-height: 6rem;
    overflow-y: scroll;
  }
}
</style>